<!-- 菜品模板选择器 -->
<template>
  <resultPopup ref="refCommonPopup" :show-icon="false">
    <template #default="{ result }">
      <view class="relative bg-white order-list flex flex-col h-full">
        <u-row gutter="10rpx" :customStyle="rowFillterBar">
          <u-col span="3">
            <uni-data-select
              title="选择菜品类别"
              v-model="filterPam.parentId"
              :localdata="foodTypeList"
              :clear="false"
              @change="changeSelect"
            ></uni-data-select>
          </u-col>
          <u-col span="3">
            <u-search
              shape="square"
              placeholder="请输入菜品名称"
              v-model="filterPam.name"
              search-icon-size="15rpx"
              @search="onSearch"
              @custom="onSearch"
              @clear="onSearch"
            ></u-search>
          </u-col>
          <u-col span="1">
            <u-button type="info" color="lightgrey" @click="resetFilter">重置</u-button>
          </u-col>
        </u-row>
        <u-row customStyle="flex:1;height:100%;align-items: baseline;">
          <view class="px-12rpx w-full box-border flex flex-col h-full">
            <uni-table
              :loading="pageStatus.loading"
              class="table-height"
              stripe
              emptyText="暂无更多数据"
              :border="true"
            >
              <!-- 表头行 -->
              <uni-tr class="thead-tr">
                <uni-th align="center" class="fixed-left">序号</uni-th>
                <uni-th align="center">类别</uni-th>
                <uni-th align="center">名称</uni-th>
                <uni-th align="center">功效</uni-th>
                <uni-th align="center">烹饪方式</uni-th>
                <uni-th align="center">图片</uni-th>
                <uni-th align="center" class="fixed-right thead">操作</uni-th>
              </uni-tr>
              <!-- 表格数据行 -->
              <uni-tr v-for="(item, index) in orderList" :key="item.buffetOrderId">
                <uni-td align="center" class="fixed-left">{{ index + 1 }}</uni-td>
                <uni-td align="center">{{ item.foodTypeName }}</uni-td>

                <uni-td align="center">{{ item.name }}</uni-td>
                <uni-td align="center">{{ item.effect }}</uni-td>
                <uni-td align="center">{{ item.cookingMethods || "-" }}</uni-td>
                <uni-td align="center">
                  <!-- !-- @ h-50rpx 需要设置固定高以便表格计算, 防止每行数据高度不一的样式问题 -- -->
                  <view class="flex h-30rpx items-center justify-center">
                    <text v-if="!item.photo">暂无图片</text>
                    <u-album
                      v-else
                      :urls="[item.photo]"
                      single-size="30rpx"
                      multiple-size="30rpx"
                      max-count="2"
                      :preview-full-image="false"
                    ></u-album>
                  </view>
                </uni-td>
                <uni-td align="center" class="fixed-right tdata">
                  <view class="relative form-item-btns flex justify-evenly items-center">
                    <u-button type="primary" @click="selectDish(item)">选择</u-button>
                  </view>
                </uni-td>
              </uni-tr>
            </uni-table>
            <view class="pagination-box">
              <uni-pagination
                show-icon
                :page-size="filterPam.size"
                :current="filterPam.current"
                :total="filterPam.total"
                @change="pageChange"
              />
            </view>
          </view>
        </u-row>
      </view>
    </template>
    <template #confirm="{ config }">
      <view> <!-- 隐藏底部 --> </view>
    </template>
  </resultPopup>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
import { foodList, getFoolTypeList, foodDel } from "@/api";
import { formatMoney, loadSysDict, splitStrToArray } from "@/utils/util";
import resultPopup from "@/components/common-popup/result-popup.vue";

const rowFillterBar = `
    padding:8rpx;
    position: sticky;
    top: 0;
    background: white;
    z-index: 2;
`;

const pageStatus = reactive({
  loading: false,
});

const filterPam = reactive({
  range: [],
  name: "", // 菜品名称 keyword
  current: 1,
  size: 10,
  total: 0,
  parentId: "", // 菜品类型id （foodTypeId）
});

const onSearch = () => {
  filterPam.current = 1;
  getPageData();
};

const resetFilter = () => {
  filterPam.name = "";
  filterPam.current = 1;
  filterPam.parentId = "";
  getPageData();
};

const orderList = ref([]);

const pageChange = (e) => {
  filterPam.current = e.current;
  getPageData();
};

const getPageData = async () => {
  pageStatus.loading = true;
  try {
    const pam = {
      // descs: "create_time",
      dataType: 4,
      ...filterPam,
    };
    const { data, success } = await foodList(pam);
    console.log(data);
    if (!success) throw new Error("获取数据失败");
    orderList.value = data.records;
    filterPam.total = data.total;
    pageStatus.loading = false;
  } catch (error) {
    pageStatus.loading = false;
    console.error(error);
  }
};

const foodTypeList = ref([]);
const changeSelect = (e) => {
  filterPam.parentId = e;
  getPageData();
};
const getTypeList = async () => {
  try {
    const pam = {
      parentId: 0,
      dataType: 3,
      // typeStatus: 1,
    };
    const { data, success } = await getFoolTypeList(pam);
    if (!success) throw new Error("获取数据失败");
    const netData = data.map((v) => ({ ...v, text: v.name, value: v.foodTypeId }));
    foodTypeList.value = [{ text: "全部", value: "" }, ...netData];
    console.log("getTypeList>>", data);
  } catch (error) {
    console.log(error);
  }
};

onMounted(async () => {
  /** 字典 */
  // loadSysDict(["sys_tabooPopulation", "sys_flavor", "sys_texture", "sys_texture", "sys_spicy"]);
  // const dicts = reactive();
  /** 获取菜品分类列表 */
  getTypeList();
  getPageData();
});

const refCommonPopup = ref();

const open = (data:any) => {
  refCommonPopup.value.open(data);
};
const close = (type?:any) => {
  refCommonPopup.value.close(type);
};

defineExpose({ open, close });

const emits = defineEmits(["select"]);
const selectDish = (item: any) => {
  emits("select", item);
  close();
};

</script>
<style lang="scss" scoped>
.order-list {
  max-width: 80vw;
  ::v-deep .u-search__content {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    margin-right: -10px;
    height: 25rpx;

    // .u-search__content__icon {
    //   display: none;
    // }

    .uni-input-input {
      height: 25rpx;
    }
  }
  ::v-deep .u-search__action {
    background: var(--kui-color-theme);
    max-height: 25rpx;
    height: 25rpx;
    border-radius: 3rpx;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 5rpx;
    font-size: 10rpx;
  }

  ::v-deep .u-button {
    border-radius: 3rpx;
    height: 25rpx;
  }
}

.fixed-left {
  position: sticky;
  background-color: white;
  left: 0;
}

.fixed-right {
  // display: flex;
  position: sticky;
  right: 0;

  &.thead {
    display: block;
    box-shadow: -6px 0px 5px 0px #e7e7e7;
  }

  &.tdata {
    background-color: white;
    box-shadow: -6px 0px 5px 0px #e7e7e7;
  }
  ::v-deep .u-button {
    margin-right: 5rpx;
    height: 20rpx;
  }
}

.form-item-btns {
  position: relative;
  // ::v-deep .kingon-select-menu{
  //   font-size: 10rpx;
  //   z-index: 6;
  // }
}

.thead-tr {
  position: sticky;
  top: 0;
}

.table-height {
  // max-height: 70vh;
  flex: auto;

  ::v-deep &.uni-table-scroll {
    border: 1px #ebeef5 solid;
  }
}

.pagination-box {
  padding: 10rpx;
  display: flex;
  flex-direction: row;
  justify-content: right;
  position: sticky;
  bottom: 0;
  background: white;
}
</style>
